$(function () {
    // 默认加载部门树
    vm.loadDeviceOrganization();
    // 默认显示所有工单
    $("#jqGrid").Grid({
        url: '../devAmTicket/list',
        rownumWidth: 35,
        colModel: [
            {label: '工单号', name: 'repairCode', index: 'REPAIR_CODE', width: 150},
            {label: '单位', name: 'workshopName', width: 100},
            {label: '区域', name: 'productLineName', width: 120},
            {label: '工序号', name: 'proceNo', width: 80},
            {label: '设备名称', name: 'devName', index: 'DEV_ID', width: 130},
            {
                label: '开始日期', name: 'startTime', index: 'START_TIME', width: 90,
                formatter: function (v) {
                    return transDate(v, 'yyyy-MM-dd')
                }
            },
            {
                label: '结束日期', name: 'finalEndTime', index: 'FINAL_END_TIME', width: 90,
                formatter: function (v) {
                    return transDate(v, 'yyyy-MM-dd')
                }
            },
            {
                label: '状态', index: 'STATUS', width: 60, formatter: function (value, col, row) {
                    var v = row.status;
                    return sysEnums.MAINTENANCE_TICKET_STATUS[v];
                }
            },
            {label: '实施人', name: 'executorName', index: 'EXECUTOR', width: 120},
            {
                label: '详情', width: 60, sortable: false,
                formatter: function (value, col, row) {
                    return "<button class='btn btn-outline btn-info' id='recordsText' onclick='vm.gdDetail(\"" + row.id + "\")'>&nbsp;<i class='fa fa-qrcode'></i></button>";
                }
            },
            {
                label: '换件记录', width: 60, sortable: false,
                formatter: function (value, col, row) {
                    return "<button title='' class='btn btn-outline btn-info' onclick='vm.addReplacePartRecord(\"" + row.id + "\")'><i class='fa fa-file-text-o'></i></button>";
                }
            },
            {
                label: '异常查看', sortable: false, width: 60,
                formatter: function (value, col, row) {
                    return "<button class='btn btn-outline btn-info' id='showText' onclick='vm.ycDetail(\"" + row.id + "\")'>&nbsp;<i class='fa fa-file-text-o'></i></button>";
                }
            },
            {name: 'devId', hidden: true},
            {name: 'isUrged', hidden: true},
            {name: 'endTime', hidden: true},
            {name: 'status', hidden: true},
            {name: 'id', key: true, hidden: true}
        ]
    });
});


var devPmTicketNumDistributionEcharts;
var vm = new Vue({
    el: '#rrapp',
    data: {
        q: {
            statMonthlyNum: '6',
            ticketType: '',
            seriesName: '',
            seriesIndex: '',
            deptCode: ''
        },
        ticketTypeList: enumsToListWithoutChange('TICKET_TYPE'),
        deptCodeArray:[],
        currentDeptName: '', // 当前部门名称
        // PM工单数量分布图option
        devPmTicketNumDistributionOption: {
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            title: {
                text: 'AM工单完成状况统计',
                subtext: '可选择查看车间和月份筛选查看完成状况统计',
                left: 'center'
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: {readOnly: false},
                    magicType: {type: ['line', 'bar']},
                    restore: {},
                    saveAsImage: {}
                }
            },
            legend: {
                data: ['完成工单数', '延期工单数', '完成维护项数', '延期维护项数'],
                bottom: 20
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '15%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: []
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            color: ['#4472c4', '#ed7d31', '#72adf6', '#f5c4a2'],
            series: [
                {
                    name: '完成工单数',
                    type: 'bar',
                    stack: 'AM工单数分布',
                    barWidth: '40%',
                    label: {
                        show: true,
                        formatter:function (params) {
                            if(params.value=='0'){
                                return ''
                            }else{
                                return params.value
                            }
                        }
                    },
                    data: []
                },
                {
                    name: '延期工单数',
                    type: 'bar',
                    stack: 'AM工单数分布',
                    label: {
                        show: true,
                        formatter:function (params) {
                            if(params.value=='0'){
                                return ''
                            }else{
                                return params.value
                            }
                        }
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: []
                },
                {
                    name: '完成维护项数',
                    type: 'bar',
                    stack: 'AM工单项完成数量分布',
                    barWidth: '40%',
                    label: {
                        show: true,
                        formatter:function (params) {
                            if(params.value=='0'){
                                return ''
                            }else{
                                return params.value
                            }
                        }
                    },
                    data: []
                },
                {
                    name: '延期维护项数',
                    type: 'bar',
                    stack: 'AM工单项完成数量分布',
                    label: {
                        show: true,
                        formatter:function (params) {
                            if(params.value=='0'){
                                return ''
                            }else{
                                return params.value
                            }
                        }
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: []
                }
            ]
        },
        deviceOrganizationList: [],
    },
    methods: {
        /**
         * 展示工单选项
         * @param id
         */
        gdDetail: function (id) {
            //根据维护工单id 查询所有维护项
            openWindow({
                type: 2,
                area:['100%','100%'],
                title: '<i class="fa fa-pencil"></i> 维护工单详情',
                content: '../device/devAmItemCheck.html?id=' + id,
                cancel: function () {
                    // 右上角关闭事件的逻辑
                    vm.reload(true);
                }
            })
        },
        // 关联备件换件记录
        addReplacePartRecord: function (ticketId) {
            openWindow({
                type: 2,
                area:['100%','100%'],
                title: '<i class="fa fa-bars"></i> 维修换件记录',
                content: '../spare/sparepartconsumrecord.html?businessId=' + ticketId + '&type=AM&materialType=3'
            })
        },
        ycDetail: function (id) {
            //异常展示
            openWindow({
                type: 2,
                area:['100%','100%'],
                title: '<i class="fa fa-pencil"></i> 上报异常记录',
                content: '../device/exceperrorView.html?originRecordId=' + id
            })
        },
        loadDeviceOrganization: function () {
            let _this = this;
            // 加载设备组织列表
            Ajax.request({
                url: "../sys/dept/loadDeviceOrganization?deptLevel=3",
                type: "GET",
                contentType: "application/json",
                successCallback: function (res) {
                    _this.deviceOrganizationList = res.deviceOrganizationList
                }
            });
        },
        search: function () {
            let _this = this;
            var param = {};
            if (this.deptCodeArray.length > 0) {
                param.deptCode = this.deptCodeArray[this.deptCodeArray.length - 1];
            }
            if (this.q.statMonthlyNum) {
                param.statMonthlyNum = this.q.statMonthlyNum;
            }
            if (this.q.ticketType) {
                param.ticketType = this.q.ticketType;
            }
            devPmTicketNumDistributionEcharts.showLoading();
            // 加载设备状态概览
            // 加载设备故障TOP数统计
            Ajax.request({
                url: "../device/stat/amTicketNumDistribution",
                type: "POST",
                params: JSON.stringify(param),
                contentType: "application/json",
                successCallback: function (res) {
                    devPmTicketNumDistributionEcharts.hideLoading();
                    var statResult = res.statResult;
                    var option = {
                        title: {
                            text: _this.currentDeptName + 'AM工单完成状况统计',
                        },
                        xAxis: {
                            data: statResult.xaxisData
                        },
                        series: statResult.barSeriesData
                    };

                    devPmTicketNumDistributionEcharts.setOption(option);
                }
            });
            this.reload();
        },
        reset: function () {
            // 重置查询条件
            this.q = {
                deptCode: '', // 设备组织CODE
                statMonthlyNum: '12',
                ticketType: '',
                seriesIndex: '',
                seriesName: ''
            };
            vm.currentDeptName = '';
            vm.deptCodeArray = [];
            this.search();
        },
        changeDeviceOrganization(){
            // 当车间发生变化时清空点击内容
            this.q.seriesIndex = '';
            this.q.seriesName = '';
        },
        reload: function () {
            if (this.deptCodeArray.length > 0) {
                vm.q.deptCode = this.deptCodeArray[this.deptCodeArray.length - 1];
            }
            var page = $("#jqGrid").jqGrid('getGridParam', 'page');
            $("#jqGrid").jqGrid('setGridParam', {
                search: true,
                postData: vm.q,
                page: page
            }).trigger("reloadGrid");
        }
    },
    mounted: function () {
        const that = this;
        // 设备PM工单数分布图表
        devPmTicketNumDistributionEcharts = echarts.init(document.getElementById("devPmTicketNumDistributionEcharts"));
        devPmTicketNumDistributionEcharts.setOption(this.devPmTicketNumDistributionOption, true);
        devPmTicketNumDistributionEcharts.on('click', function (params) {
            vm.q.seriesName = params.name;
            vm.q.seriesIndex = params.seriesIndex;
            vm.reload();
        });
        // 初始化加载数据
       this.$nextTick(function (params) {
           that.search();
       })
    }
});
